// 文件用于配置vuex
import Vue from 'vue'
import Vuex from 'vuex'
import {getRequest} from '../utils/api'
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import { Notification } from 'element-ui'; // Notification通知的 引用


const now = new Date();

Vue.use(Vuex)
const store = new Vuex.Store({ //导出
    state: { // state是全局对象，用来保存所有组件公共的数据
        routes: [], // 路由
        sessions:{}, // 存聊天记录等 用对象接收 sessions: {'zhangsan#lis':[{}]}, :张三->李四，后面跟上数组,数组里面有具体的聊天内容
        // 获取其他用户接口返回的数据
        admins: [],
        currentSession: null, // 项目可以直接获取所有的用户了，所以可以把id换成完整的用户对象
        filterKey:'',
        // 当前用户
        currentAdmin: JSON.parse(window.sessionStorage.getItem("user")), // currentAdmin: JSON.parse(window.sessionStorage.getItem("user")), // 获取用户  存在点进去后不能立马获取的问题-->获取时间提前
        stomp:null,
        idDot: {}
    },

    mutations: { //mutations唯一可以改变state值的方法（同步执行）
        INIT_ADMIN(state,admin){
            state.currentAdmin = admin;
        },
        initRoutes(state,data) { //初始化路由
            state.routes = data;
        },
        changecurrentSession (state,currentSession) {
			state.currentSession = currentSession;
            Vue.set(state.idDot,state.currentAdmin.username + '#' +state.currentSession.username,false);
		},
		addMessage (state,msg) {
			let mss = state.sessions[state.currentAdmin.username+'#'+msg.to];
            // 判断到底存在与否
            if(!mss){
                // // 如果不存在 定义一个空数组出来
                // state.sessions[state.currentAdmin.username+'#'+msg.to] = [];
                // 监听消息  sessions发生变化的时候页面会跟着变化而变化
                Vue.set(state.sessions, state.currentAdmin.username + '#' + msg.to, []);

            }
            // 存在的情况
            state.sessions[state.currentAdmin.username+'#'+msg.to].push({
				content: msg.content,
				date: new Date(),
				self: !msg.notSelf  // self是不是自己的
			})
		},
    INIT_DATA (state) {
       // 浏览器本地历史聊天记录
        // 从localStorage获取 vue-chat-session（基本上所有的用户信息聊天信息都放在这个上面了）
      let data = localStorage.getItem('vue-chat-session');
      //console.log(data)
      if (data) {
        state.sessions = JSON.parse(data);
      }
    },
    INIT_ADMINS(state,data){      
        // 把对应的数据存在vuex里面
        state.admins = data;
    }
    },
    actions: { // 异步执行mutations方法
        connect(context){
            context.state.stomp = Stomp.over(new SockJS('/ws/ep')); //ws/ep 后端的端点   连接后端的端点
            // 需要参数->整个项目都是使用了jwt令牌的，后端对jwt令牌进行了登录的拦截
            // 所以我们需要获取这样的token，传到后端
            let token = window.sessionStorage.getItem('tokenStr');
            context.state.stomp.connect({'Auth-Token':token},success =>{
                // 订阅消息
                context.state.stomp.subscribe('/user/queue/chat',msg=>{ // 'user/queue/chat'消息频道
                    // console.log(msg.body); // body消息体
                    // 消息接收
                    let receiveMsg = JSON.parse(msg.body);
                    if(!context.state.currentSession || receiveMsg.from!=context.state.currentSession.username){
                        Notification.info({
                            title: '【'+receiveMsg.fromNickName+'】发来一条消息',
                            message: receiveMsg.content.length>10?receiveMsg.content.substr(0,10):receiveMsg.content,
                                position: 'bottom-right'
                          });
                        //   让vue监控值的变化
                          Vue.set(context.state.idDot,context.state.currentAdmin.username + '#' +receiveMsg.from,true); // true为展示小红点
                    }
                    receiveMsg.notSelf = true; // 因为接受的消息不是自己的
                    receiveMsg.to = receiveMsg.from;
                    context.commit('addMessage',receiveMsg);
                })
            },error=>{

            })
        },  
        initData (context) {
            context.commit('INIT_DATA');
            getRequest('/chat/admin').then(resp=>{
                if(resp){
                    context.commit('INIT_ADMINS',resp)
                }
            })          
          }
    } 
})

store.watch(function (state) { // 监听
    return state.sessions // sessions有变化的时候
  },function (val) {
    console.log('CHANGE: ', val);
    localStorage.setItem('vue-chat-session', JSON.stringify(val)); // 有变化存在localStorage里
  },{
    deep:true/*这个貌似是开启watch监测的判断,官方说明也比较模糊*/
  })
  
  
  export default store;